<template>
	<view class="my-card">
		<view class="card">
			<view class="left"><image class="thumb" :src="thumb" /></view>
			<view class="right">
				<view class="card-body">
					<view class="title">{{ title }}</view>
					<view class="price">
						<text>￥{{ price }}</text>
						<text class="quantity">X {{ quantity }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="card-footer">
			 <slot name="footer" />
		</view>
	</view>
</template>

<script>
export default {
	name: 'my-card',
	props: {
		idid: Number,
		quantity: Number,
		price: String,
		desc: String,
		title: String,
		thumb: String
	},
	data() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.my-card {
	background-color: #ffffff;
	padding: 20rpx;
	border-bottom: 1px solid #f5f5f5;
	box-sizing: border-box;
}

.card {
	
	display: flex;
	.left {
		width: 200rpx;
		padding: 20rpx;
		box-sizing: border-box;
		.thumb {
			width: 160rpx;
			height: 160rpx;
		}
	}
	.right {
		flex: 1;
		display: flex;
		align-items: center;
		.card-body {
			width: 100%;

			.title {
				margin-bottom: 10rpx;
			}
			.desc {
				margin-bottom: 10rpx;
			}
			.price {
				display: flex;
				justify-content: space-between;
				 
			}
		}
	}
}

.card-footer {
	display: flex;
	justify-content: flex-end;	
}
</style>
